<script setup lang="ts" name="spray_index">
import {
    getCurrentInstance,
    defineComponent,
    onMounted,
    onActivated,
    reactive,
    ref,
    toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import { CirclePlus, Search, Refresh, EditPen, Share, Notebook, Setting } from '@element-plus/icons-vue'
import { url } from "inspector";
import { ElTable } from 'element-plus'

// 表格
interface User {
    date: string
    name: string
    address: string
}
// 开关
const value2 = ref(true)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<any[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const tableData: any[] = [
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
    {
        date: '1',
        name: '十二局工区-6工区-东侧围挡-1号喷淋',
        codeNumber: 'NDCF00000047',
        cardNumber: '8986061900001822434N',
        state: '设备离线',
        control: '',
        voltage: '-',
    },
]

const router = useRouter();

// 页面搜索重置输入框
const input1 = ref('')
const input2 = ref('')

onMounted(() => {

})

</script>

<template>
    <div class="dust">
        <!-- 页面搜索重置输入框 -->
        <div class="dust-box">
            设备名称：
            <el-input v-model="input1" placeholder="请输入设备名称" clearable style="width: 20%; margin-right: 20px;" />
            设备编码：
            <el-input v-model="input2" placeholder="请输入设备编码" clearable style="width: 20%; margin-right: 20px;" />
            物联网卡号：
            <el-input v-model="input2" placeholder="物联网卡号" clearable style="width: 20%; margin-right: 20px;" />
            <el-button type="primary" :icon="Search">查询</el-button>
            <el-button type="warning" :icon="Refresh">重置</el-button>
            <el-button type="success" :icon="CirclePlus">新增</el-button>
        </div>

        <!-- 列表 -->
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column label="序号" width="60" align="center">
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="设备名称" show-overflow-tooltip width="300" align="center"/>
            <el-table-column property="codeNumber" label="设备编码" show-overflow-tooltip align="center"/>
            <el-table-column property="cardNumber" label="物联网卡号" show-overflow-tooltip align="center"/>
            <el-table-column property="state" label="设备状态" show-overflow-tooltip align="center"/>
            <el-table-column property="voltage" label="手动控制" show-overflow-tooltip align="center">
                <el-switch v-model="value2" class="ml-2"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </el-table-column>
            <el-table-column property="voltage" label="电压检测" show-overflow-tooltip align="center"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small" type="success" @click="(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
// 总页面
.dust {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #141414;
    padding: 24px;
}

// 查询重置新增
.dust-box {
    text-align: center;
}
</style>
